剩最後幾天了,今天講最後一個hook,接下來應該會用一個實際的小project來實戰練習
這個 hook 可以讓你在指定的時間間隔重複地執行一個回調函數,它的功能就跟原生的 setInterval
類似。
import { useEffect, useRef } from "react";
const useInterval = (callback: Function, delay?: number | null) => {
const savedCallback = useRef<Function>(() => {});
useEffect(() => {
savedCallback.current = callback;
});
useEffect(() => {
if (delay !== null) {
const interval = setInterval(() => savedCallback.current(), delay || 0);
return () => clearInterval(interval);
}
return undefined;
}, [delay]);
};
export default useInterval;
const savedCallback = useRef<Function>(() => {});
useRef
保存回調函數。目的是讓回調函數在不同的 render 之間保持其持久性,但不會引起組件的重新渲染。useEffect
:useEffect
:delay
不為 null,將設置一個新的間隔。並在組件卸載時,清除這個間隔。其實概念跟之前說的useTimeout差不多